<template>
  <Layout>
    <PageHeaderNew :items="items"></PageHeaderNew>
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <div class="col-md-12">
              <div class="form-group">
                <label class="control-label">数据脚本名称</label>
                <b-form-input
                  for="text"
                  v-model="name"
                  placeholder="请输入数据脚本名称"
                  trim
                ></b-form-input>
              </div>
            </div>
            <div style="display: flex;">
              <div class="col-md-6">
                <div class="form-group">
                  <label class="control-label">对外发布接口地址（可选）</label>
                  <b-form-input
                    for="text"
                    v-model="name"
                    placeholder="请输入对外发布接口地址"
                    trim
                  ></b-form-input>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label class="control-label">执行周期（cron格式）</label>
                  <b-form-input
                    for="text"
                    v-model="name"
                    placeholder="*/*/*/5"
                    trim
                  ></b-form-input>
                </div>
              </div>
            </div>
            <b-tabs justified nav-class="nav-tabs-custom newul" content-class="p-3 text-muted">
              <b-tab active>
                <template v-slot:title>
                  <span class="d-inline-block d-sm-none">
                    <i class="fas fa-cog"></i>
                  </span>
                  <span class="d-none d-sm-inline-block">执行代码脚本</span>
                </template>
                <div>
                  <div style="width:100%;height:300px;line-height:300px;text-align:center;border:1px solid #eee;">数据脚本执行代码以及调用系统接口</div>
                  <div style="margin-top:20px;">
                    <b-button variant="primary">测试</b-button>
                    <b-button style="margin-left: 50px;" variant="primary">发布</b-button>
                  </div>
                </div>
              </b-tab>
              <b-tab>
                <template v-slot:title>
                  <span class="d-inline-block d-sm-none">
                    <i class="fas fa-cog"></i>
                  </span>
                  <span class="d-none d-sm-inline-block">可视化拖拽</span>
                </template>
                可视化拖拽
              </b-tab>
            </b-tabs>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>

<script>
import Layout from "../../../layouts/main";
import PageHeaderNew from "@/components/page-header-new";

export default {
  components: {
    Layout,
    PageHeaderNew,
  },
  data() {
    return {
      items: [
        {
          text: "数据处理",
          url: "/datahouse/processing",
        },{
          text: "创建数据处理脚本",
          url: "/",
        }
      ],
      name: '',
    };
  },
};
</script>

<style lang="scss" scoped>
.card-body ::v-deep .newul{
  display: block;
  li{
    display: inline-block;
    margin: 0 1rem;
    a{
      padding: 0.5rem 0rem;
    }
  }
}
</style>